<template>
<Modal :mask-closable="false" v-model="showData"  @on-visible-change="(e) => {!e && $emit('closeDataModal', false);}" :width="1000" title="当日数量" :footer-hide=true :draggable="true">
    <template #header>
        <p>
            当日数据
            <Tooltip placement="top" content="发布日期当天数据">
                <Icon type="ios-help-circle-outline" />
            </Tooltip>
            
        </p>
    </template>
    <Table :columns="columns" :data="list" :loading="loading" @on-sort-change="sortChange">
    </Table>
    <Page class="ivu-mt-16" :total="total" :modelValue="params.current" :page-size="params.size" :page-size-opts="pageOpts" show-total show-sizer  @on-change="changePage" @on-page-size-change="changepageSize"/>
    
</Modal>
</template>  
<script>
    import { publishList} from "@api/content.js";
    export default {
        name: 'publishlsit',
        props:["showData","contentId"],
        data () {
            return {
                total:0,
                pageOpts:[10, 20, 30, 40],
                params:{content_id:'',order_column:'',order_sort:'',current: 1,size: 10},
                list:[],
                loading:false,
                columns:[
                    {
                        key:'platform_name',
                        title:'平台',
                        width:130
                    },
                    {
                        key:'account_name',
                        title:'账号',
                        width:140
                    },
                    {
                        key:'doctor_name',
                        title:'医生',
                        width:100
                    },
                    {
                        key:'read_num',
                        title:'浏览量',
                        width:100,
                        sortable: 'custom'
                    },
                    {
                        key:'like_num',
                        title:'点赞',
                        width:80,
                        sortable: 'custom'
                    },
                    {
                        key:'collect_num',
                        title:'收藏',
                        width:80,
                        sortable: 'custom'
                    },
                    {
                        key:'comment_num',
                        title:'评论',
                        width:80,
                        sortable: 'custom'
                    },
                    {
                        key:'created_member_name',
                        title:'发布人',
                        width:100
                    },
                    {
                        key:'publish_time_str',
                        title:'发布日期',
                        width:150
                    }
                ],
            }
                
        },
        watch:{
            showData(){
                if(this.showData){
                    this.params={content_id:this.contentId,order_column:'',order_sort:'',current: 1,size: 10}
                    this.getData()                              
                }
            },
        },
        methods:{
            sortChange(e){
                this.params.order_column=e.key.replace(/_str$/,'')
                this.params.order_sort=e.order
                this.getData()
            },
            //切换page
            changePage(index) {
                this.params.current = index;
                this.getData();
            },
            changepageSize(val) {
                this.params.size = val;
                this.getData();
            },
            getData(){
                this.loading=true
                let params={
                    content_id:this.params.content_id,
                    page:this.params.current,
                    pageSize:this.params.size,
                    order_column:this.params.order_column,
                    order_sort:this.params.order_sort
                }
                publishList(params).then(res=>{
                    this.list=res.list
                    this.total=res.total
                    this.loading=false
                })
                
            },
        }
    } 
</script>